<template>
  <div class="errorpage" ref="bgstar">
    <img class="myimg" :src="PIC" alt="" />
    <div class="down" v-if="false">
      <van-count-down :time="count * 1000" @finish="onFinish">
        <template #default="timeData">
          剩余 <span class="block">{{ timeData.seconds }}</span> S
        </template>
      </van-count-down>
    </div>
    <Dao
      size="50px"
      :time="5"
      :isClick="true"
      :toggle="true"
      :onFinish="onFinish"
      :flag="true"
    ></Dao>
    <span
      v-for="(item, index) in spanList"
      class="spandot"
      :key="index"
      :style="item"
    ></span>
  </div>
</template>
  
<script setup lang="ts" >
import { computed, onMounted, ref, watchEffect } from "vue";
import PIC from "../../assets/images/404.png";
import { useRouter } from "vue-router";
const bgstar: any = ref();
const router: any = useRouter(); // 组合式API 路由对象
const count = ref<number>(5);
const gotopage = () => {
  router.push("/guide");
};
const spanList = ref<spanTypes[]>([]);

const todoGetSpanList = () => {
  let width: number = bgstar.value.clientWidth;
  let height: number = bgstar.value.clientHeight;
  for (var i = 0; i < 520; i++) {
    var left = width * Math.random();
    var top = height * Math.random();
    var scaler = Math.random() * 1.5;
    var rate = Math.random() * 2.5;
    var opacity = Math.random();

    spanList.value.push({
      left: left + "px",
      top: top + "px",
      transform: `scale(${scaler})`,
      animationDelay: rate + "s",
      background: `rgba(255,255,255,${opacity})`,
    });
  }
};
const onFinish = (): void => {
  gotopage();
};
onMounted(() => {
  todoGetSpanList();
});
</script>
  
<style lang="scss" scoped>
.errorpage {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  padding: 0 !important;
  overflow: hidden;
  .down {
    position: absolute;
    left: 20px;
    top: 20px;
    border: 1px solid #fff;
    color: #fff;
    width: 70px;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    .van-count-down {
      color: #fff;
      margin-right: 2px;
      font-size: 12px;
    }
  }
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    ::v-deep .van-circle__text {
      color: #fff !important;
      font-size: 12px !important;
    }
  }
  .myimg {
    width: 270px;
    height: 270px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
  }
  .spandot {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }
}
</style>
  